<template>
  <div id="home_con" class="home_container" @scroll="$store.state.datePickerShow = false">
    <template v-for="(value, key) in questionsAnswersData">
      <div v-show="rhPlate === key" :id="['CON_' + key]" :key="key" class="home_rh">
        <HomeDJHeader :rhPlate="rhPlate" />
        <div v-for="(item, index) in value" :key="index">
          <template v-if="item.type === 'send_search'">
            <Questions :userText='item.inputValue' />
          </template>
          <Answers :answersData='item.data' />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import qs from "qs";
import Answers from './questionsAnswers/Answers.vue'
import Questions from './questionsAnswers/Questions.vue'
import HomeDJHeader from './homeDJHeader/Index.vue'
import { mapState } from 'vuex'
import AesGcm from "@/utils/aesgcm";
const headerAndFooterHeight = 207; // header 和 footer 高的和.
export default {
  name: 'HomeContainer',
  components: {
    Answers,
    Questions,
    HomeDJHeader
  },
  computed: {
    ...mapState(['rhPlate', 'questionsAnswersData']),
  },
  data() {
    return {
      position: { x: 0, y: 0 },
      picW: '',//图标的宽
      picH: '',//图标的高
      visualAreaW: "",//可视区域宽
      visualAreaH: "",//可视区域高
      startX: "",//触摸起点X坐标
      startY: "",//触摸起点Y坐标
      leftDistance: '',//可移动的左距离
      rightDistance: '',//可移动的右距离
      topDistance: '',//可移动的上距离
      bottomDistance: '', //可移动的下距离
      theInitialCoordinateY: "",//图标初始坐标Y
      moveDiv: "",//拖拽模块
      topOffset: "",//顶部区域高
      buttonOffset: "",//底部区域高
      viewingAreaDiv: "",//可拖拽区域
    }
  },
/*  mounted() {
    // ios 下面 高需要计算出来,不然键盘弹出后,会对页面高进行改变,如果采用以前自适应高的方式的话,一些内容会被跳出的软键盘遮住
    const screenHeight = window.innerHeight;
    const homeConHeight = screenHeight - headerAndFooterHeight;
    window.document.getElementById('home_con').style.height = `${homeConHeight}px`;
    this.moveDiv = document.querySelector("#pic");
    this.viewingAreaDiv = document.querySelector("#home_con");//拖拽区域
    this.picW = this.moveDiv.offsetWidth;
    this.picH = this.moveDiv.offsetHeight;
    this.topOffset = this.viewingAreaDiv.offsetTop;
    this.visualAreaH = this.viewingAreaDiv.clientHeight;
    this.buttonOffset = this.topOffset + this.visualAreaH;
    this.visualAreaW = this.viewingAreaDiv.clientWidth;
    this.theInitialCoordinateY = this.buttonOffset - this.picH;
    this.moveDiv.addEventListener('touchstart', this.down, { passive: false });
    this.moveDiv.addEventListener('touchmove', this.move, { passive: false });
    this.moveDiv.addEventListener('touchend', this.end, { passive: false });
    this.$nextTick(() => {
      //可移动边界判断
      this.leftDistance = this.moveDiv.offsetLeft;
      this.topDistance = this.moveDiv.offsetTop - this.topOffset;
      this.bottomDistance = this.visualAreaH - this.topDistance - this.picH;
      this.rightDistance = this.visualAreaW - this.leftDistance - this.picW;
    })
  },*/
  methods: {
    gotoShuZhiRen() {
      const param = qs.stringify({
        userId: this.$store.state.userInfo.userID,
        empNum: this.$store.state.userInfo.userIdCard,
        mxhookfetch: false
      });
      // 因为VUE_APP_SZR_URL中存在#号，从而不能直接用 new URL 来构建链接地址。
      const url = AesGcm.decrypt(process.env.VUE_APP_SZR_URL) + param;
      MXCommon.openUrlPage(url.toString());
    },
    // 点击图标执行方法
    down(event) {
      this.position.x = this.moveDiv.offsetLeft;
      this.position.y = this.moveDiv.offsetTop;
      const touch = event.touches ? event.touches[0] : event;
      //光标起始位置
      this.startX = touch.clientX;
      this.startY = touch.clientY;
    },
    // 图标移动方法
    move(event) {
      const touch = event.touches ? event.touches[0] : event;
      event.preventDefault(); //阻止body滚动
      //光标偏移量
      this.curx = touch.clientX - this.startX;
      this.cury = touch.clientY - this.startY;
      //DOM 运动边界判断方法
      const borderJudgment = (curXY, DistanceMix, DistanceMax) => {
        //curXY：光标偏移量
        //DistanceMix：最小偏移量
        //DistanceMax：最大偏移量
        if (curXY > 0) {
          // 向右和向下
          return Math.abs(curXY) > DistanceMax ? DistanceMax : curXY;
        } else {
          // 向左和向上
          return Math.abs(curXY) > DistanceMix ? -DistanceMix : curXY
        }
      };
      this.curx = borderJudgment(this.curx, this.leftDistance, this.rightDistance);
      this.cury = borderJudgment(this.cury, this.topDistance, this.bottomDistance);
      //DOM 运动
      this.moveDiv.style.transform = `translate(${this.curx}px,${this.cury}px)`;
    },
    // 图标移动结束方法
    end() {
      let boxX = parseInt(this.position.x) + this.curx;  //DOMX轴偏移量
      const boxY = parseInt(this.position.y) + this.cury;  //DOMY轴偏移量
      // 处理吸边
      boxX = boxX > this.visualAreaW / 2 ? this.visualAreaW - this.picW : 0;
      //end 时，重绘DOM位置，并清空transform的值。
      this.moveDiv.style.left = boxX + 'px';
      this.moveDiv.style.top = boxY + 'px';
      this.curx = 0;
      this.cury = 0;
      this.moveDiv.style.transform = '';
      //可移动边界判断
      this.leftDistance = boxX;
      this.rightDistance = this.visualAreaW - this.leftDistance - this.picW;
      this.topDistance = this.moveDiv.offsetTop - this.topOffset;
      this.bottomDistance = this.visualAreaH - this.topDistance - this.picH;
    },
  }
}
</script>

<style scoped>
@import url('~@/assets/css/home/homeContainer.css');

.backIcon {
  display: block;
  position: fixed;
  z-index: 997;
  touch-action: none;
}
</style>
